<template>
  <div>
    <h1 v-color="color">app.vue</h1>
    <button @click="color = 'red'">把color改成红</button>
    <button @click="isShow = false">隐藏</button>
    <father v-if="isShow" />
  </div>
</template>

<script>
import father from "./components/father";
export default {
  components: {
    father,
  },

  data() {
    return {
      isShow: true,
      color: "blue",
    };
  },

  // 用来声明自定义指令的地方
  directives: {
  /*
    color: {
      // 这个是当绑定指令的dom渲染出来时就会调用函数，调用1次（渲染时调用）
      // 参数1：绑定指令的元素
      // 参数2：是一个对象，里面有绑定指令的相关信息,例如最常用的就是obj.value属性，
      // 可以拿到指令绑定的数据
      bind(el, obj) {
        // console.log('bind调用了', el, obj)
        el.style.color = obj.value;
      },

      // 本指令绑定的数据发生改变就来调用
      // 两个参数同上
      update(el, obj) {
        // console.log('update调用了', el, obj)

        // 把修改后的值重新赋值给标签的样式即可
        el.style.color = obj.value;
      },
    },
  */

    // 如果bind和update里要执行的代码一模一样，可以简写
    // 就相当于不管是bind的时机还是update时机，都是调用此函数
    color (el, obj) {

      el.style.color = obj.value 
    }
  },
};
</script>

<style>
</style>